<template>
	<view class="control">
		<view class="box-1">
			<view class="postion">
			</view>
		</view>
		<!-- 门票购买 -->
		<view class="box-2">
			<!-- 培训报班 -->
			<view class="data-list5">
				<scroll-view scroll-y class="scroll"
					style="height: 100vh;background-color: #fff;padding: 0 20rpx;border-radius: 8rpx;margin: 20rpx 20rpx 20rpx 20rpx;width: calc(100% - 40rpx);">
					<view style="height: auto;" v-if="products.length > 0">
						<view class="" style="display: flex;flex-direction: column;margin-top: 20rpx;">
							<view class=""
								style="border-bottom: 1rpx #cfcfcf solid;width: 710rpx;height: 200rpx;display: flex;flex-direction: row;margin-bottom: 20rpx;"
								v-for="(im,indexx) in products" :key="indexx" @click="ondatalist3(im, index)">
								<view class="">
									<image style="width: 280rpx;height: 180rpx;border-radius: 12rpx;" :src="im.show_img" mode=""></image>
								</view>
								<view class="" style="width: 400rpx;height: 210rpx;">
									<view class="footer-xxq">{{im.race_name}}</view>
									<view class="footer-xxw">{{im.display_start}} - {{im.display_end}}</view>
									<view class="flex-between" style="width: 100%;padding: 0 20rpx;margin-top: 40rpx;">
										<view class="footer-xxr" style="">
											<text class="footer-xxr1">{{im.price_selling}}</text>
											<!-- <text class="footer-xxr2">起</text> -->
										</view>
										<view
											style="width: 120rpx;height: 50rpx;background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;border-radius: 15rpx;font-size: 24rpx;color: #FFFFFF;line-height: 50rpx;text-align: center;">
											购买
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="products.length === 0" style="position: absolute;top: 200rpx; left: 30%;">
						<u-empty mode="list" text="暂无类目,看看其他商品吧~" :icon="icon1">
						</u-empty>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	import uniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
	const venues = require("@/api/venues/venues.js");
	export default {
		components: {
			QSNavbar,
			uniRate,
		},
		data() {
			return {
				icon1: this.$https.assetsPath + '58d1bf2665b8c20e302f02c56274f0ce972df8b4.png',
				icon2: 'https://oss.szsportscenter.cn/upload/4f/8af522d3c9d2241c9bace6dc33bb6f.png?attname=1%402x.png',
				id: '',
				products:[]
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getcatelist();
			uni.setNavigationBarTitle({
				title: options.name
			});

		},
		methods: {
			async getcatelist() {
				let that = this;
				let postData = {
					id: this.id,
				};
				let res = await venues.getCoperateByAct(postData);
				if (res.code === 1) {
					this.products = res.data
				}
			},
			// 滚动加载
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.pageNo) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.getcatelist()
			},

			ondatalist3(item, index) {
				console.log(item, 'pages_other/train/train', this.venueDetail)
				uni.navigateTo({
					url: './race_detail?id=' + item.id
				})

			}
		},
	};
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		// min-height: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.box-1 {
		position: relative;
		width: 100%;

		>image {
			display: block;
			width: 100%;
		}

		.postion {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			box-sizing: border-box;
		}

		.box-1-con {
			image {
				display: block;
				width: 100%;
			}

			.box-1-dian {
				height: 120rpx;
				padding: 0px 30rpx;
				margin-top: 19rpx;

				.image {
					width: 160rpx;
					height: 100%;
					// overflow: hidden;

					image {
						border-radius: 10rpx;
						width: 100%;
						height: 100%;
					}
				}

				.dian-info {
					margin-left: 20rpx;
					display: flex;
					height: 100%;
					flex-direction: column;
					justify-content: space-around;

					.title {
						color: rgb(255, 255, 255);
						font-size: 33rpx;
						font-weight: 700;
					}

					/deep/ .u-tag-wrapper {
						margin-right: 20rpx;

						.u-tag {
							border-radius: 17px;
							font-size: 26rpx;
							height: 40rpx;
							padding: 0px 15rpx;
						}
					}

					.desc {
						color: rgb(255, 255, 255);
						font-size: 22rpx;
						font-weight: 700;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 380rpx;
					}
				}

				.btn {
					color: rgb(255, 255, 255);
					background-color: #F7E9CC;
					border-radius: 17px;
					font-size: 26rpx;
					height: 40rpx;
					padding: 0px 15rpx;
					// padding: 5rpx 20rpx;
					margin-top: 60rpx;
					color: #675034;
					line-height: 40rpx;
				}
			}
		}

	}

	.box-2 {
		// padding: 0px 30rpx;
		// padding: 0px 10rpx;
		// margin-left: 20rpx;
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		// transform: translateY(-60rpx);
		// margin-top: 50rpx;
		// margin-right: 20rpx;
		border-radius: 10rpx;

		>view {
			flex: 1;
			height: 0;

			.scroll {
				// height: calc(100% - 40rpx);
				height: 100%;
			}
		}



		.data-list5 {
			background-color: #EDF5F5;

			.loap {
				/deep/.u-tabs {
					background-color: #fff;
					// border-bottom: 1px solid #E5E5E5;
					// margin: 0 20rpx;

					.u-tabs__wrapper__nav__item {
						flex: 1;
					}

					.u-tabs__wrapper__nav__line {
						bottom: 0;
					}
				}
			}

			.footer-xxq {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 30rpx;
				line-height: 33rpx;
				margin-top: 25rpx;
				color: #333333;
				font-weight: 600;
				width: 500rpx;
				padding: 0 20rpx;

			}

			.footer-xxw {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 26rpx;
				line-height: 33rpx;
				margin-top: 10rpx;
				color: #999;
				width: 500rpx;
				padding: 0 20rpx;
				font-weight: 400;
			}

			.footer-xxr {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				line-height: 33rpx;
				width: 70%;
				// margin-top: 40rpx;
			}

			.footer-xxr1 {
				font-weight: bold;
				font-size: 36rpx;
				color: #4BA677;
			}

			.footer-xxr2 {
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #A6A6A6;
			}

			.goods-item {
				height: 156rpx;
				margin-top: 30rpx;

				.image {
					width: 270rpx;
					height: 156rpx;
					border-radius: 10rpx;
					position: relative;

					/deep/ .u-transition {
						width: 100%;
						height: 100%;
					}

					.image-info {
						position: absolute;
						bottom: 0;
						width: 100%;
						left: 0;
						font-size: 24rpx;
						text-align: center;
						color: white;
						padding: 10rpx 0;
						background-color: rgba(0, 0, 0, 0.5);
						border-radius: 0 0 10rpx 10rpx;
					}

					.tag1 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 10rpx 0 15rpx 0;
						// background-image:  #4BA677;
						background: linear-gradient(270deg, #57C08B 0%, #69D1A4 100%);
					}

					.tag2 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 10rpx 0 15rpx 0;
						background-image: linear-gradient(to right, #43e090, #26cd78);
					}

					.tag3 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 10rpx 0 15rpx 0;
						background-image: linear-gradient(to right, #ed7af4, #ec46f6);
					}
				}

				.detail {
					flex: 1;
					width: 0;
					height: 100%;
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.tag {
						font-size: 22rpx;
						border-radius: 8rpx;
						padding: 5rpx 10rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						color: #4BA677;
						border: 1rpx solid #4BA677;
					}

					.detail-2 {
						color: #a3a3a3;
						font-size: 23rpx;

						image {
							width: 25rpx;
							height: 25rpx;
							margin-right: 10rpx;
						}
					}

					.price {
						color: #ff6a42;

						text {
							font-weight: 700;
							font-size: 37rpx;
						}
					}

					.info {
						color: #a3a3a3;
						font-size: 23rpx;
						margin-left: 15rpx;
						transform: translateY(4rpx);
					}
				}
			}
		}
	}
</style>